<template>
	<view>
		<view class="bg-video" style="height: 100vh;">
			<image src="../../static/img/orderbg.png" mode="aspectFill" class="w-all h-all"></image>
			<view class="w-all h-all" style="position: absolute;top: 0;left: 0;">
				<view class="" :style="{ height: StatusBar + 'px' }">

				</view>
				<view class="padding flex align-center" style="height: 40px;">
					<view class="text-bold text-xl">
						订购中心
					</view>
					<view class=" flex align-center margin-left" @tap="chooseLocation">
						<image src="../../static/img/dingwei.png" mode="" style="width: 17upx;height: 20upx;"></image>
						<view class="text999 text-sm  text-1 margin-left-xs" style="max-width: 250upx;">
							{{ city }}
						</view>
					</view>
				</view>
				<scroll-view scroll-y="true" id="box" :style="{ height: boxHeight + 'px' }">
					<view class="margin padding-lg bg-white radius10">
						<view class="flex align-center">
							<view class="flex-sub text-lg text-bold">
								填写信息
							</view>
							<view class="text999 text-sm">
								填写学生的订奶信息
							</view>
						</view>
						<view class="box flex align-center bg-video">
							<view class="text666" style="width: 150upx;">
								所在城市
							</view>
							<input type="text" placeholder="请输入学校所在城市例:湛江市" placeholder-class="c5" v-model="region"
								class="text-df flex-sub">
							<view @tap="regionBlur" class=" text999">
								搜索
							</view>
						</view>
						<view class="box flex align-center bg-video">
							<view class="text666" style="width: 150upx;">
								选择区域
							</view>
							<picker mode="selector" :range="districtList" :value="districtListIndex" range-key="name"
								@change="districtListChange" :class="districtListIndex == -1 ? 'c5' : ''"
								class="flex-sub text-1">
								{{ districtListIndex == -1 ? '请选择您所在区域' : districtList[districtListIndex].name }}
							</picker>
							<view class="cuIcon-unfold text999">

							</view>
						</view>
						<view class="box flex align-center bg-video" @tap="selectSchool">
							<view class="text666" style="width: 150upx;">
								选择学校
							</view>
							<!-- <picker mode="selector" :range="districtList" :value="districtListIndex" range-key="name"
								@change="districtListChange" :class="districtListIndex==-1?'c5':''"
								class="flex-sub text-1">
								{{districtListIndex==-1?'请选择您所在区域':districtList[districtListIndex].name}}
							</picker> -->
							<view class="flex-sub" :class="schoolData.name ? '' : 'c5'">
								{{ schoolData.name ? schoolData.name : '输入关键字查询或下拉选择' }}
							</view>
							<view class="cuIcon-unfold text999">

							</view>
							<!-- <view class="bg-cyan shadow  w-all" 
							style="position: absolute;left: 0;top: 100upx;z-index: 999999;">
								<scroll-view scroll-y="true"  style="height: 1600upx;">
									<view></view>
								</scroll-view>
							</view> -->
						</view>
						<view class="box flex align-center bg-video">
							<view class="text666" style="width: 150upx;">
								年级/班级
							</view>
							<picker mode="multiSelector" :range="classGrade" :value="classGradeIndex" range-key="name"
								@change="classGradeChange" :class="classGradeIndex[0] == -1 ? 'c5' : ''"
								class="flex-sub text-1">
								{{ classGradeIndex[0] == -1 ? '下拉选择' : classGrade[0][classGradeIndex[0]].name +
									classGrade[1][classGradeIndex[1]].name }}
							</picker>
							<view class="cuIcon-unfold text999">

							</view>
						</view>
						<view class="box flex align-center">
							<view class="text666" style="width: 150upx;">
								学生姓名
							</view>
							<input type="text" placeholder="请输入学生姓名，多个逗号隔开" placeholder-class="c5" v-model="name"
								class="text-df flex-sub">
						</view>
						<view class="box flex align-center">

							<view class="text666" style="width: 150upx;">
								家长手机
							</view>

							<input v-if="phoneShow" type="number" maxlength="11" placeholder="请输入您的手机号"
								placeholder-class="c5" v-model="phone" class="text-df flex-sub">
							<view v-else class="" @tap="focusFun" style="color: #c8c8c8;">
								请输入您的手机号
							</view>
						</view>
						<view class="box flex align-center">
							<view class="text666" style="width: 150upx;">
								验证码
							</view>
							<input type="tenumberxt" maxlength="6" placeholder="请输入验证码" placeholder-class="c5"
								v-model="code" class="text-df flex-sub">
							<view class="text-blue" @tap="getCode">
								{{ codeNun == 60 ? '验证码' : codeNun + 's' }}
							</view>
						</view>
					</view>
					<view class="margin radius10" style="background-color: #E0F1FF;padding-bottom: 1upx;">
						<view class="padding bg-video text-lg text-bold">
							选择商品信息
							<image src="../../static/img/niutou.png" mode="" style="width: 158upx;height: 155upx;
				position: absolute;right: 40upx;top: -15upx;"></image>
						</view>
						<view class="bg-white radius10 padding flex align-center margin-xs"
							v-for="(item, index) in list" :key="index">
							<radio :checked="item.check" color="#008CFF" style="transform: scale(.8);"
								class="margin-right radius" @tap="radioChange(index)"></radio>
							<image :src="item.goods_image" mode="aspectFill" style="width: 200upx;height: 150upx;">
							</image>
							<view class="flex-sub margin-left">
								<view class="text666">
									{{ item.name }}
								</view>
								<view class="margin-top-sm text666 text-sm">
									{{ item.specifications }}
								</view>
								<view class="margin-top-sm flex align-end">
									<view class="flex-sub">
										¥{{ item.price }}
									</view>
									<view class="flex text-center" style="line-height: 50upx;height: 50upx;">
										<view class="solid borcolor" style="width: 50upx;" @tap="numChange(1, index)">
											-
										</view>
										<view class="solid-bottom solid-top borcolor" style="width: 70upx;">
											{{ item.num }}
										</view>
										<view class="solid borcolor" style="width: 50upx;" @tap="numChange(2, index)">
											+
										</view>
									</view>
								</view>
							</view>
						</view>
					</view>
					<view class="" style="height: 90px;"></view>
				</scroll-view>
			</view>
		</view>
		<view class="foot-box solid-top borcolor bg-white" style="padding: 20upx 45upx;">
			<button class="cu-btn mybtn radius10 bg-blue" @tap="submit">立即支付
				<text class="margin-left-sm text-bold" v-show="money">¥{{ money }}</text></button>
			<view class="flex align-center justify-center margin-top-xs">
				<radio :checked="radio" color="#F50437" style="transform: scale(.7);" @tap="radio = !radio"></radio>
				<view class="text-sm " style="color: #999;">
					同意
					<text @tap="util.urlTo('rich_text?name=《用户订奶须知》&id=1')">《用户订奶须知》</text>
					<text @tap="util.urlTo('rich_text?name=《用户购买须知》&id=2')">《用户购买须知》</text>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName == '1' ? 'show' : ''">
			<view class="cu-dialog">
				<view class="cu-bar bg-white justify-end">
					<view class="content">选择学校</view>
					<view class="action" @tap="modalName = 0">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view>
				<view class="padding-xl bg-white text-left" style="padding-top: 10upx;">
					<view class="box flex align-center margin-bottom-sm">
						<input type="text" placeholder="请输入关键字" placeholder-class="c5" v-model="schoolName"
							class="text-df flex-sub" @input="getSchool">
					</view>
					<scroll-view scroll-y="true" style="height: 500upx;">
						<view v-for="(item, index) in schoolList" :key="index"
							class="bor-b-E5 padding-bottom-sm padding-top-sm" @tap="schoolData = item; modalName = ''">
							{{ item.name }}
						</view>
					</scroll-view>
				</view>
			</view>
		</view>
		<view class="cu-modal" :class="modalName == '2' ? 'show' : ''">
			<view class="cu-dialog">
				<!-- <view class="cu-bar bg-white justify-end">
					<view class="content"></view>
					<view class="action" @tap="modalName=0">
						<text class="cuIcon-close text-red"></text>
					</view>
				</view> -->
				<view class="padding-xl">
					<view class="padding-xl text-bold text-lg">
						支付成功!
					</view>
					<view class="margin-top-xl flex">
						<button class="bg-blue round cu-btn flex-sub" @tap="util.backTo()">继续下单</button>
						<button class="line-blue margin-left round cu-btn flex-sub" @tap="orderTo">查看订单</button>
					</view>
				</view>
			</view>
		</view>
		<view class="cu-modal bottom-modal " :class="show ? 'show' : ''">
			<view class="cu-dialog  bg-no " @tap.stop="">
				<view class="padding-xl">
					<button class="cu-btn mybtn bg-white round text666" @getphonenumber="getPhoneNumber"
						open-type="getPhoneNumber">获取手机号</button>
					<button style="margin-top: 20rpx;" class="cu-btn mybtn bg-white round text666"
						@tap="show = false">取消</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				region: '',
				show: false,
				codeNun: 60,
				radio: false,
				StatusBar: this.StatusBar,
				boxHeight: '',
				city: '',
				districtList: [],
				districtListIndex: -1,
				modalName: 0,
				schoolName: '',
				schoolList: [],
				schoolData: {},
				all: {},
				classGrade: [
					[],
					[]
				],
				classGradeIndex: [-1, -1],
				name: '',
				code: '',
				phone: '',
				list: [],
				money: '',
				school_type: '',
				cartList: [],
				phoneShow: false
			}
		},
		onReady() {
			this.box();
		},
		onLoad(e) {
			if (uni.getStorageSync('mobileWx')) {
				this.phoneShow = true
			} else {
				this.phoneShow = false
			}
			this.school_type = e.school_type;
			this.getLocation();
			this.getData();
			console.log(this.classGrade, '班级列表');
		},
		methods: {
			box() {
				const query = uni.createSelectorQuery().in(this);
				query.select('#box').boundingClientRect(data => {
					this.boxHeight = this.screenHeight - data.top;
				}).exec();
			},
			// 验证码倒计时
			timer() {
				let _this = this;
				let type = 1;
				setInterval(function() {
					if (_this.codeNun == 0) {
						_this.codeNun = 60;
						type = 0;
					} else if (type == 1) {
						_this.codeNun--;
					}
				}, 1000)
			},
			numChange(e, index) {
				if (e == 2) {
					this.list[index].num++;
				} else {
					if (this.list[index].num > 1) {
						this.list[index].num--;
					}
				}
				this.$forceUpdate();
				this.getMoney();
			},
			getLocation() {
				let _this = this;
				uni.getLocation({
					type: 'wgs84',
					success: function(res) {
						_this.getAddress(res.latitude, res.longitude)
					}
				})
			},
			chooseLocation(e) {
				let _this = this;
				uni.chooseLocation({
					success: function(res) {
						_this.getAddress(res.latitude, res.longitude)
					}
				});
			},
			getAddress(latitude, longitude) {
				this.util.getDistrict(latitude, longitude).then(res => {
					this.city = res.address_component.city;
					this.region = res.address_component.city;
					this.getDistrict();
				})
			},
			getData() {
				this.util.request('/goods/goodsInfo', {
					school_type: this.school_type
				}).then(res => {
					this.classGrade[0] = res.schoolGrade;
					this.classGrade[1] = res.schoolClass;
					res.goodsList.map(i => {
						let data = i;
						data.num = 1;
						data.check = true;
						this.list.push(data);
					})
					this.getMoney();
				})
			},
			getDistrict() {
				this.districtList = [];
				this.districtListIndex = -1;
				this.util.request('/goods/getDistrict', {
					city: this.city
				}).then(res => {
					this.districtList = res;
				})
			},
			districtListChange(e) {
				this.districtListIndex = e.detail.value;
				this.schoolData = {};
				this.getSchool();
			},
			getSchool() {
				this.schoolList = [];
				this.util.request('/school/searchList', {
					schoole_area_id: this.districtList[this.districtListIndex].id,
					name: this.schoolName,
					school_type: this.school_type
				}).then(res => {
					this.schoolList = res;
				})
			},
			selectSchool(e) {
				if (this.districtListIndex == -1) {
					this.util.showToast('请先选择区域');
				} else {
					this.modalName = 1;
				}
			},
			classGradeChange(e) {
				console.log(e, '班级');
				this.classGradeIndex = e.detail.value;
			},
			getCode() {
				if (!this.util.checkPhone(this.phone)) {
					this.util.showToast('请输入正确手机号');
					return false;
				}
				this.util.request('/school/sendSms', {
					mobile: this.phone
				}).then(res => {
					this.timer();
				})
			},
			radioChange(e) {
				this.list[e].check = !this.list[e].check;
				this.$forceUpdate();
				this.getMoney();
			},
			getMoney() {
				this.money = 0;
				this.cartList = [];
				this.list.map((i, j) => {
					if (i.check) {
						this.money += i.num * Number(i.price);
						this.cartList.push(i);
					}
				})
			},
			submit() {
				if (this.districtListIndex == -1 || !this.schoolData.id || this.classGradeIndex[0] == -1 ||
					!this.name || !this.phone || !this.code || !this.cartList.length) {
					this.util.showToast('请完成信息');
					return false;
				}
				if (!this.radio) {
					this.util.showToast('请阅读并同意下单须知');
					return false;
				}
				let cart = [];
				this.cartList.map(i => {
					cart.push(i.id + '-' + i.num);
				})
				this.util.request('/order/addOrder', {
					school_type: this.school_type,
					school_area_id: this.districtList[this.districtListIndex].id,
					school_lists_id: this.schoolData.id,
					school_grade_id: this.classGrade[0][this.classGradeIndex[0]].id,
					school_classs_id: this.classGrade[1][this.classGradeIndex[1]].id,
					student_name: this.name,
					mobile: this.phone,
					code: this.code,
					cart: cart.join(','),
				}).then(res => {
					let openid = uni.getStorageSync('user').openid;
					this.util.request('/order/pay', {
						order_id: res.order_id,
						openid: openid
					}).then(data => {
						this.util.wxPay(data).then(gdx => {
							if (gdx == 1) {
								this.modalName = 2;
							}
						})
					})
				})
			},
			orderTo() {
				uni.redirectTo({
					url: '/pages/index/order_list'
				})
			},
			focusFun() {
				if (!uni.getStorageSync('mobileWx')) {
					this.show = true
				}
			},
			getPhoneNumber(e) {
				if (!e.detail.encryptedData) {
					this.util.showToast('手机号授权获取失败，请在右上角开启权限');
				}
				this.util.request('/login/wxGetPhone', {
					openid: uni.getStorageSync('openidWx'),
					encryptedData: e.detail.encryptedData,
					iv: e.detail.iv,
					address: ''
				}).then(res => {
					this.show = false;
					this.phone = res.mobile;
					uni.setStorageSync('mobileWx', res.mobile);
					this.phoneShow = true
				})
			},
			regionBlur(e) {
				if (this.region) {
					this.city = this.region;
					this.getDistrict();
				} else {
					this.util.showToast('请先填写区所在城市');
				}

			}
		}
	}
</script>

<style>
	page {
		/* background-image: url('../../static/img/orderbg.png');
		width: 100%;
		height: 100vh;
		background-size: cover; */
	}

	.box {
		background: #F9F9F9;
		border-radius: 14upx;
		border: 1upx solid #E6E6E6;
		padding: 20upx;
		margin-top: 30upx;
	}

	.c5 {
		color: #C5C5C5;
	}

	.borcolor {
		border-color: #D1D1D1;
	}
</style>